<template>
  <div class="home">
      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="180">
      </el-table-column>
      <el-table-column
        prop="publishTime"
        label="发布时间">
      </el-table-column>
      <el-table-column
        label="操作">
        <template v-slot='scope'>
          <span @click='toDetail(scope.row)'>详情</span>
          <span>删除</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// 导入axios
import axios from '@/http/axios'
export default {
  data(){
    return {
      tableData:[]
    }
  },
  created(){
    this.login()
    this.findAllNews()
  },
  methods:{
    // 查看详情
    toDetail(item){
      // 跳转到详情页面
      // console.log(item.id)
      this.$router.push({
        path:'about',
        query:{id:item.id}
      })
      // this.$router.push({
      //   name:'About',
      //   params:{id:item.id}
      // })
    },
    // 登录
    login(){
      axios.post('http://121.199.29.84:8001/user/login',{
        username:'admin',
        password:'123321'
      }).then((res)=>{
        // 将token储存到浏览器
        localStorage.setItem('token',res.data.data.token)
      })
    },
    // 查询所有的新闻
    findAllNews(){
      axios.get('http://121.199.29.84:8001/article/findAll').then((res)=>{
        this.tableData = res.data.data
      })
    }
  }
}
</script>
